<template>
	<div class="layout-config-drawer">
		<el-drawer v-model="webConfigStore.layout.showDrawer" append-to-body size="330">
			<template #header>
				<div style="margin: 0 0 10px 0">布局配置</div>
			</template>
			<el-scrollbar>
				<el-form ref="formRef" :model="webConfigStore.layout">
					<div class="layout-mode-styles-box">
						<el-divider border-style="dashed">布局方式</el-divider>
						<div class="layout-mode-box-style">
							<el-row :gutter="20" class="layout-mode-box-style-row">
								<el-col v-if="!webConfigStore.layout.shrink" :span="12">
									<div :class="webConfigStore.layout.layoutMode === 'Default' ? 'active' : ''"
									     class="layout-mode-style default" @click="setLayoutMode('Default')">
										<div class="layout-mode-style-box">
											<div class="layout-mode-style-aside"></div>
											<div class="layout-mode-style-container-box">
												<div class="layout-mode-style-header"></div>
												<div class="layout-mode-style-container"></div>
											</div>
										</div>
										<div class="layout-mode-style-name">默认</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div :class="webConfigStore.layout.layoutMode === 'Classic' ? 'active' : ''"
									     class="layout-mode-style classic" @click="setLayoutMode('Classic')">
										<div class="layout-mode-style-box">
											<div class="layout-mode-style-aside"></div>
											<div class="layout-mode-style-container-box">
												<div class="layout-mode-style-header"></div>
												<div class="layout-mode-style-container"></div>
											</div>
										</div>
										<div class="layout-mode-style-name">经典</div>
									</div>
								</el-col>
							</el-row>
							<el-row v-if="!webConfigStore.layout.shrink" :gutter="20">
								<el-col :span="12">
									<div :class="webConfigStore.layout.layoutMode === 'Streamline' ? 'active' : ''"
									     class="layout-mode-style streamline" @click="setLayoutMode('Streamline')">
										<div class="layout-mode-style-box">
											<div class="layout-mode-style-container-box">
												<div class="layout-mode-style-header"></div>
												<div class="layout-mode-style-container"></div>
											</div>
										</div>
										<div class="layout-mode-style-name">单栏</div>
									</div>
								</el-col>
							</el-row>
						</div>
						<el-divider border-style="dashed">全局</el-divider>
						<div class="layout-config-global">
							<el-form-item v-if="isAdmin()" label="深色模式">
								<el-switch v-model="webConfigStore.layout.isDark" active-action-icon="el-icon-Moon" inactive-action-icon="el-icon-Sunny" inline-prompt/>
							</el-form-item>
							<el-form-item label="页面切换动画">
								<el-select v-model="webConfigStore.layout.mainAnimation" placeholder="请选择动画名称"
								           @change="onCommitState($event, 'mainAnimation')">
									<el-option label="slide-right" value="slide-right"></el-option>
									<el-option label="slide-left" value="slide-left"></el-option>
									<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
									<el-option label="el-fade-in" value="el-fade-in"></el-option>
									<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
									<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
									<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<el-divider border-style="dashed">侧边栏</el-divider>
						<div class="layout-config-aside">
							<el-form-item label="侧边菜单栏背景色">
								<el-color-picker v-model="menuBackground"/>
							</el-form-item>
							<el-form-item label="侧边菜单文字颜色">
								<el-color-picker v-model="menuColor"/>
							</el-form-item>
							<el-form-item label="侧边菜单激活项背景色">
								<el-color-picker v-model="menuActiveBackground"/>
							</el-form-item>
							<el-form-item label="侧边菜单激活项文字色">
								<el-color-picker v-model="menuActiveColor"/>
							</el-form-item>
							<el-form-item label="显示侧边菜单顶栏(LOGO栏)">
								<el-switch v-model="webConfigStore.layout.menuShowTopBar"
								           @change="onCommitState($event, 'menuShowTopBar')"></el-switch>
							</el-form-item>
							<el-form-item label="侧边菜单顶栏背景色">
								<el-color-picker v-model="menuTopBarBackground"/>
							</el-form-item>
							<el-form-item label="侧边菜单展开宽度(px)">
								<el-input-number v-model="webConfigStore.layout.menuWidth" :min="200" :precision="0" :step="10"
								                 controls-position="right" @input="onCommitState($event, 'menuWidth')"/>
							</el-form-item>
							<el-form-item label="侧边菜单默认图标">
								<icon-selector v-model="webConfigStore.layout.menuDefaultIcon" placement="bottom-start"
								               @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"/>
							</el-form-item>
							<el-form-item label="侧边菜单水平折叠">
								<el-switch v-model="webConfigStore.layout.menuCollapse"
								           @change="onCommitState($event, 'menuCollapse')"></el-switch>
							</el-form-item>
							<el-form-item label="侧边菜单手风琴">
								<el-switch v-model="webConfigStore.layout.menuUniqueOpened"
								           @change="onCommitState($event, 'menuUniqueOpened')"></el-switch>
							</el-form-item>
						</div>
						<el-divider border-style="dashed">顶栏</el-divider>
						<div class="layout-config-aside">
							<el-form-item
									v-if="webConfigStore.layout.layoutMode === 'Default' || webConfigStore.layout.layoutMode === 'Classic'"
									label="标签页图标">
								<el-switch v-model="webConfigStore.layout.tabIcon" @change="onCommitState($event, 'tabIcon')"/>
							</el-form-item>
							<el-form-item label="顶栏背景色">
								<el-color-picker v-model="headerBarBackground"/>
							</el-form-item>
							<el-form-item label="顶栏文字色">
								<el-color-picker v-model="headerBarTabColor"/>
							</el-form-item>
							<el-form-item label="顶栏悬停时背景色">
								<el-color-picker v-model="headerBarHoverBackground"/>
							</el-form-item>
							<el-form-item label="顶栏菜单激活项背景色">
								<el-color-picker v-model="headerBarTabActiveBackground"/>
							</el-form-item>
							<el-form-item label="顶栏菜单激活项文字色">
								<el-color-picker v-model="headerBarTabActiveColor"/>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</el-scrollbar>
			<template #footer>
				<el-popconfirm :hide-after="0" title="确定要恢复全部配置到默认值吗？" width="auto" @confirm="restoreDefault">
					<template #reference>
						<div class="cus-center">
							<el-button icon="el-icon-Refresh" style="width: 90%" type="warning">恢复默认</el-button>
						</div>
					</template>
				</el-popconfirm>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup>
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import IconSelector from '@/components/iconSelector.vue'
import {cacheKeys} from '@/stores/constant/cacheKey'
import {Session} from '@/utils/storageUtil'
import {useUserStore} from '@/stores/modules/user.store'
import {cloneDeep} from 'lodash-es'
import {computed, nextTick} from 'vue'
import {onAdaptiveLayout} from '@/utils/layoutUtil'
import {isAdmin} from '@/utils/authUtil'

const userStore = useUserStore()
const webConfigStore = useWebConfigStore()

const menuBackground = computed({
	get: () => {
		return webConfigStore.getColorVal('menuBackground')
	},
	set: (value) => {
		onCommitColorState(value, 'menuBackground')
	}
})

const menuColor = computed({
	get: () => {
		return webConfigStore.getColorVal('menuColor')
	},
	set: (value) => {
		onCommitColorState(value, 'menuColor')
	}
})

const menuActiveBackground = computed({
	get: () => {
		return webConfigStore.getColorVal('menuActiveBackground')
	},
	set: (value) => {
		onCommitColorState(value, 'menuActiveBackground')
	}
})

const menuActiveColor = computed({
	get: () => {
		return webConfigStore.getColorVal('menuActiveColor')
	},
	set: (value) => {
		onCommitColorState(value, 'menuActiveColor')
	}
})

const menuTopBarBackground = computed({
	get: () => {
		return webConfigStore.getColorVal('menuTopBarBackground')
	},
	set: (value) => {
		onCommitColorState(value, 'menuTopBarBackground')
	}
})

const headerBarBackground = computed({
	get: () => {
		return webConfigStore.getColorVal('headerBarBackground')
	},
	set: (value) => {
		onCommitColorState(value, 'headerBarBackground')
	}
})

const headerBarTabColor = computed({
	get: () => {
		return webConfigStore.getColorVal('headerBarTabColor')
	},
	set: (value) => {
		onCommitColorState(value, 'headerBarTabColor')
	}
})

const headerBarHoverBackground = computed({
	get: () => {
		return webConfigStore.getColorVal('headerBarHoverBackground')
	},
	set: (value) => {
		onCommitColorState(value, 'headerBarHoverBackground')
	}
})

const headerBarTabActiveBackground = computed({
	get: () => {
		return webConfigStore.getColorVal('headerBarTabActiveBackground')
	},
	set: (value) => {
		onCommitColorState(value, 'headerBarTabActiveBackground')
	}
})

const headerBarTabActiveColor = computed({
	get: () => {
		return webConfigStore.getColorVal('headerBarTabActiveColor')
	},
	set: (value) => {
		onCommitColorState(value, 'headerBarTabActiveColor')
	}
})

const onCommitState = (value: any, name: keyof LayoutConfig) => {
	webConfigStore.setLayout(name, value)
}

const onCommitColorState = (value: string | null | undefined, name: keyof LayoutConfig) => {
	if (!value) {
		return
	}
	const colors = webConfigStore.layout[name] as [string, string]
	if (webConfigStore.layout.isDark) {
		colors[1] = value
	} else {
		colors[0] = value
	}
	webConfigStore.setLayout(name, colors)
}

const setLayoutMode = (mode: LayoutConfig['layoutMode']) => {
	Session.set(cacheKeys.BEFORE_RESIZE_LAYOUT, {
		layoutMode: mode,
		menuCollapse: webConfigStore.layout.menuCollapse
	})
	webConfigStore.layout.layoutMode = mode
}

// 修改默认菜单图标
const onCommitMenuDefaultIcon = (value: any, name: any) => {
	webConfigStore.setLayout(name, value)
	const menus = cloneDeep(userStore.menus)
	userStore.menus = []
	nextTick(() => {
		userStore.menus = menus
	})
}

const restoreDefault = () => {
	webConfigStore.resetLayout('showDrawer')
	Session.remove(cacheKeys.BEFORE_RESIZE_LAYOUT)
	onAdaptiveLayout()
}
</script>

<style lang="scss" scoped>
.layout-config-drawer :deep(.el-input__inner) {
	padding: 0 0 0 6px;
}

.layout-config-drawer :deep(.el-input-group__append) {
	padding: 0 10px;
}

.layout-config-drawer :deep(.el-drawer__header) {
	margin-bottom: 0 !important;
}

.layout-config-drawer :deep(.el-drawer__body) {
	padding: 0;
}

.layout-config-drawer :deep(.el-drawer__close-btn) {
	margin-bottom: 10px;
}

.layout-mode-styles-box {
	padding: 20px;
}

.layout-mode-box-style-row {
	margin-bottom: 15px;
}

.layout-mode-style {
	border: 1px solid var(--el-border-color-light);
	border-radius: var(--el-border-radius-small);
	cursor: pointer;
	height: 100px;
	position: relative;

	&:hover,
	&.active {
		border: 1px solid var(--el-color-primary);
	}

	.layout-mode-style-name {
		align-items: center;
		border: 1px solid var(--el-color-primary-light-3);
		border-radius: 50%;
		color: var(--el-color-primary-light-5);
		display: flex;
		height: 50px;
		justify-content: center;
		position: absolute;
		width: 50px;
	}

	.layout-mode-style-box {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		width: 100%;
	}

	&.default {
		align-items: center;
		display: flex;
		justify-content: center;

		.layout-mode-style-aside {
			background-color: var(--el-border-color-lighter);
			height: 90%;
			width: 18%;
		}

		.layout-mode-style-container-box {
			height: 90%;
			margin-left: 4%;
			width: 68%;

			.layout-mode-style-header {
				background-color: var(--el-border-color-lighter);
				height: 10%;
				width: 100%;
			}

			.layout-mode-style-container {
				background-color: var(--el-border-color-extra-light);
				height: 85%;
				margin-top: 5%;
				width: 100%;
			}
		}
	}

	&.classic {
		align-items: center;
		display: flex;
		justify-content: center;

		.layout-mode-style-aside {
			background-color: var(--el-border-color-lighter);
			height: 100%;
			width: 18%;
		}

		.layout-mode-style-container-box {
			height: 100%;
			width: 82%;

			.layout-mode-style-header {
				background-color: var(--el-border-color);
				height: 10%;
				width: 100%;
			}

			.layout-mode-style-container {
				background-color: var(--el-border-color-extra-light);
				height: 90%;
				width: 100%;
			}
		}
	}

	&.streamline {
		align-items: center;
		display: flex;
		justify-content: center;

		.layout-mode-style-container-box {
			height: 100%;
			width: 100%;

			.layout-mode-style-header {
				background-color: var(--el-border-color);
				height: 10%;
				width: 100%;
			}

			.layout-mode-style-container {
				background-color: var(--el-border-color-extra-light);
				height: 90%;
				width: 100%;
			}
		}
	}
}

</style>
